<template>
  <div class="wraper" v-show="editImgVisible">
    <div class="son">
      <div style="display: flex; align-items: center; justify-content: center; width: 400px; margin: 0 auto">
        <span class="span">宽(px):</span><el-input :max="+imgSize.curImgWidth" @change="changeSize" type="number" v-model="dwidth" placeholder="请输入图片宽度"></el-input>
        <span class="span">高(px):</span><el-input :max="+imgSize.curImgHeight" @change="changeSize" type="number" v-model="dheight" placeholder="请输入图片高度"></el-input>
        <span class="span">旋转(°):</span><el-input @change="rotateImg" type="number" v-model="rotate" placeholder="请输入角度"></el-input>
      </div>
      <div class="tips">
        <span><i class="el-icon-info"></i>滚动滚轮调整大小</span>
        <span><i class="el-icon-info"></i>拖动调整位置</span>
      </div>
      <div class="img-container">
        <img id="curimg" ref="curimg" :src="src" />
      </div>
      <div class="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
  name: 'editImg',
  data () {
    return {
      cropper: null,
      aspectRatio: 1,
      rotate: 0,
      dwidth: 300,
      dheight: 200
    }
  },
  props: {
    editImgVisible: {
      type: Boolean,
      default: false
    },
    src: {
      type: String,
      required: true,
      default: ''
    },
    imgSize: {
      type: Object,
      required: true
    }
  },
  watch: {
    imgSize: {
      handler: function (val) {
        console.log(val)
        this.dwidth = val.curImgWidth
        this.dheight = val.curImgHeight
        this.changeSize()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  },
  updated () {
    if (this.src) this.cropper.replace(this.src)
    this.changeSize()
  },
  methods: {
    rotateImg () {
      this.cropper.rotate(Number(this.rotate))
    },
    init () {
      this.cropper = new Cropper(this.$refs.curimg, {
        viewMode: 2,
        aspectRatio: this.aspectRatio,
        dragMode: 'move',
        autoCropArea: 1,
        // cropBoxMovable: false,
        // cropBoxResizable: false,
        background: false,
        movable: true
      })
    },
    changeSize () {
      if (Number(this.dwidth) > Number(this.imgSize.curImgWidth)) this.dwidth = Number(this.imgSize.curImgWidth)
      if (Number(this.dheight) > Number(this.imgSize.curImgHeight)) this.dheight = Number(this.imgSize.curImgHeight)
      this.aspectRatio = Number(this.dwidth) / Number(this.dheight)
      this.cropper.setAspectRatio(this.aspectRatio)
    },
    cancel () {
      this.rotate = 0
      this.$emit('update:editImgVisible', false)
      this.$emit('cancelEditImg')
    },
    confirm () {
      const that = this
      this.cropper.getCroppedCanvas({
        width: that.dwidth,
        height: that.dheight
      }).toBlob(function (blob) {
        that.$emit('finishEditImg', blob)
      })
      this.cancel()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  background-color: #000;
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
.wraper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  background-color: black;
  .son {
    // width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .img-container {
      margin: 20px 0;
      background-color: #fff;
      max-height:70vh;
      overflow: hidden;
      img {
        display: block;
        max-width: 100%;
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.span {
  display: block;
  width: 110px;
  text-align: right;
  color: white;
}
::v-deep .el-input {
  width: 150px;
}
.tips {
  span {
    display: inline-block;
    margin: 5px;
    padding: 2px;
    background-color: #fff;
    color: skyblue;
    border-radius: 4px;
  }
}
</style>
